<template>
  <div id="box">
    <!-- 顶部标题栏 -->
    <mt-header class="bg_logo" title="">
      <router-link to="/" slot="left">
        <mt-button>
          <img class="head_logo" src="../assets/img/header_menu.png" alt="">
        </mt-button>
      </router-link>
      <mt-button slot="right">
          <img class="head_logo" src="../assets/img/header_user.png" alt="">
      </mt-button>
    </mt-header>
    <!-- 顶部标题栏结束 -->
    <!-- 背景图 -->
      <div>
        <img class="bg_img" src="../assets/img/login_bg.png" alt="">
      </div>
      <div style="height:20%"></div>
      <div>
        <img class="bg_img" src="../assets/img/login_img.png" alt="">
        <div style="text-align:center">
          <img src="../assets/img/logo_white.png" alt="">
        </div>
      </div>
    <!-- 背景图结束 -->
    <div class="login_reg">
      <van-tabs >
        <van-tab title-style="font-size:1.4em;" title="登录">
          <div>
            <p class="login_p">
              账号：<input
                type="text"
                placeholder="请输入用户名"
                v-model="name"
              />
            </p>
            <p class="login_p">
              密码：<input
                type="password"
                placeholder="请输入密码"
                v-model="pwd"
              />
            </p>
            <mt-button @click="dengLu" type="primary">快速登录</mt-button>
          </div>
        </van-tab>
        <van-tab title-style="font-size:1.4em;" title="注册">
          <div class="login_div">
            <p class="login_p">
              账号：<input
                type="text"
                placeholder="请输入用户名"
                v-model="name"
              />
            </p>
            <p class="login_p">
              密码：<input
                type="password"
                placeholder="请输入密码"
                v-model="pwd"
              />
            </p>
            <p class="login_p">
              密码：<input
                type="password"
                placeholder="请确认密码"
                v-model="repwd"
              />
            </p>
            <mt-button type="primary" @click="checkFrom">快速注册</mt-button>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      pwd: "",
      repwd: "",
    };
  },
  methods: {
    dengLu(){
      if (this.checkName() && this.checkPwd2()) {
        console.log("验证成功开始登录");
        let uname = this.name;
        let upwd = this.pwd;
        this.axios
          .get("/u/us").then((res) => {
            console.log(res);
          });
      }
    },
    checkFrom() {
      if (this.checkName() && this.checkPwd() && this.checkRepwd()) {
        console.log("验证成功开始注册");
        location.href="/login"
        let uname = this.name;
        let upwd = this.pwd;
        this.axios.get('/u/us').then(res=>{
          console.log(res.data.results);
        })
      }else{
        console.log("注册失败");
      }
    },
    checkPwd() {
      let reg = /^\d{4}$/;
      if (reg.test(this.pwd)) {
        return true;
      } else {
        return false;
      }
    },
    checkRepwd() {
      let reg = /^\d{4}$/;
      if (reg.test(this.pwd) && this.pwd == this.repwd) {
        return true;
      } else {
        return false;
      }
    },
    checkPwd2() {
      let reg = /^\d{4}$/;
      if (reg.test(this.pwd)) {
        return true;
      } else {
        return false;
      }
    },
    checkName() {
      let reg = /^\w{6,15}$/;
      if (reg.test(this.name)) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style scoped>
#box {
  width: 100%;
  height: 736px;
  background-color: blue;
  position: relative;
}
.bg_logo{
  background-image: url("../assets/img/logo_white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 60px;
  background-color: rgba(19, 32, 153, 0.3);
}
.head_logo{
  width: 70%;
}
.bg_img{
  width: 100%;
}
.login_reg{
  width: 100%;
  height: 40%;
  background-color: white;
  border-radius: 20px;
  position:absolute;
  top: 30%;
  text-align: center;
  padding-top: 20px;
}
.login_p{
  font-size: 1.3em;
  width: 95%;
  /* margin-top: 10px; */
  margin: 0;
  margin-top: 20px;
  margin-bottom: 30px;
}
/* .login_p input{
    height: 40px;
  } */
/* .login_div{
  height: 100%;
} */
</style>